<route lang="yaml">
meta:
  title: 收费管理
  constant: true
  menu: false
</route>

<script lang="ts" setup>
import { toast } from 'vue-sonner'

const router = useRouter()

const viewSettings = reactive({
  topCopy: '置顶推荐文案，置顶后，成交率是普通信息的数倍哦！',
  showOnPublish: true,
  showAfterPublish: true,
})

type Currency = 'cash' | 'coin'
const currencyOptions = [
  { label: '现金', value: 'cash' },
  { label: '金币', value: 'coin' },
]

const homeTypeTop = reactive({
  currency: 'cash' as Currency,
  packages: [
    { price: 10, unit: '元', days: 3, unitDays: '天' },
    { price: 20, unit: '元', days: 7, unitDays: '天' },
    { price: 30, unit: '元', days: 15, unitDays: '天' },
  ],
})

const typeTop = reactive({
  currency: 'cash' as Currency,
  packages: [] as { price: number, unit: string, days: number, unitDays: string }[],
})

function addHomeTypePackage() {
  homeTypeTop.packages.push({ price: 10, unit: '元', days: 3, unitDays: '天' })
}
function removeHomeTypeLast() {
  homeTypeTop.packages.pop()
}

function addTypePackage() {
  typeTop.packages.push({ price: 10, unit: '元', days: 3, unitDays: '天' })
}
function removeTypePackage(index: number) {
  typeTop.packages.splice(index, 1)
}

function saveFeeSettings() {
  toast.success('已保存')
}
function gotoSelectCategories() {
  router.push('/sort/center_page')
}
</script>

<template>
  <div class="px-6 py-4 space-y-6">
    <div class="text-base font-medium">
      通用置顶项
    </div>

    <div class="space-y-3">
      <el-input v-model="viewSettings.topCopy" placeholder="置顶推荐文案" />
      <div class="flex items-center gap-6">
        <div class="flex items-center gap-2">
          <span class="text-sm">展示设置</span>
        </div>
        <div class="flex items-center gap-4">
          <el-checkbox v-model="viewSettings.showOnPublish">
            发布时展示
          </el-checkbox>
          <el-checkbox v-model="viewSettings.showAfterPublish">
            发布后展示
          </el-checkbox>
        </div>
      </div>
    </div>

    <div class="text-base font-medium">
      个人用户设置
    </div>
    <div class="space-y-5">
      <div class="text-sm text-muted-foreground">
        若不需要以下某个置顶方式，不填对应置顶的值即可
      </div>

      <div class="space-y-2">
        <div class="flex items-center gap-4">
          <span class="text-sm">分类首页+类别置顶时长与费用</span>
          <el-radio-group v-model="homeTypeTop.currency">
            <el-radio v-for="c in currencyOptions" :key="c.value" :label="c.value">
              {{ c.label }}
            </el-radio>
          </el-radio-group>
        </div>
        <div class="space-y-2">
          <div v-for="(pkg, idx) in homeTypeTop.packages" :key="idx" class="flex items-center gap-2">
            <el-input-number v-model="pkg.price" :min="0" />
            <span class="text-sm">{{ pkg.unit }}</span>
            <el-input-number v-model="pkg.days" :min="0" />
            <span class="text-sm">{{ pkg.unitDays }}</span>
          </div>
        </div>
        <div class="flex items-center gap-2">
          <el-button type="danger" @click="removeHomeTypeLast">
            删除
          </el-button>
          <el-button type="primary" @click="addHomeTypePackage">
            添加
          </el-button>
        </div>
      </div>

      <div class="space-y-2">
        <div class="flex items-center gap-4">
          <span class="text-sm">类别置顶时长与费用</span>
          <el-radio-group v-model="typeTop.currency">
            <el-radio v-for="c in currencyOptions" :key="c.value" :label="c.value">
              {{ c.label }}
            </el-radio>
          </el-radio-group>
        </div>
        <div class="space-y-2">
          <div v-for="(pkg, idx) in typeTop.packages" :key="idx" class="flex items-center gap-2">
            <el-input-number v-model="pkg.price" :min="0" />
            <span class="text-sm">{{ pkg.unit }}</span>
            <el-input-number v-model="pkg.days" :min="0" />
            <span class="text-sm">{{ pkg.unitDays }}</span>
            <el-button size="small" type="danger" @click="removeTypePackage(idx)">
              删除
            </el-button>
          </div>
        </div>
        <div>
          <el-button type="primary" @click="addTypePackage">
            添加
          </el-button>
        </div>
      </div>
    </div>

    <div class="flex items-center gap-4 pt-2">
      <el-button type="primary" @click="saveFeeSettings">
        保存
      </el-button>
      <el-button type="primary" plain @click="gotoSelectCategories">
        选择需要置顶的分类
      </el-button>
    </div>
    <div class="text-xs text-muted-foreground">
      发布和置顶的全局设置会同步到选择的分类中
    </div>
  </div>
</template>
